<template>
  <div id="client-info">
    <ContentField>
      <template v-slot:content-field-card-name>个人信息</template>
      <template v-slot:content-field-card-button>
        <div></div>
      </template>
      <template v-slot:content-field-card-body>
        <div id="client-info-body">
          <el-form v-model="form" label-width="120px">
            <el-form-item label="顾客姓名：">
              <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="性别：">
              <el-select
                v-model="form.sex"
                placeholder="please select your sex"
              >
                <el-option label="男" value="男" />
                <el-option label="女" value="女" />
              </el-select>
            </el-form-item>
            <el-form-item label="生日：">
              <el-date-picker
                v-model="form.birthday"
                type="date"
                placeholder="Pick a date"
                style="width: 100%"
              />
            </el-form-item>
            <el-form-item label="手机号码：">
              <el-input v-model="form.phone" />
            </el-form-item>
            <el-form-item label="偏好">
              <el-select v-model="form.prefer" class="m-2" placeholder="Select">
                <el-option
                  v-for="item in food_style_list"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">提交修改</el-button>
              <el-button>Cancel</el-button>
            </el-form-item>
          </el-form>
        </div>
      </template>
      <template v-slot:content-field-card-footer></template>
    </ContentField>
  </div>
</template>

<script>
import ContentField from "@/components/ContentField.vue";
import { reactive, computed } from "vue";
import { useStore } from "vuex";
import dateUtil from "@/util/date";
import { ElNotification } from "element-plus";

export default {
  components: {
    ContentField,
  },
  setup() {
    let store = useStore();
    let form = reactive({
      name: store.state.client.name,
      sex: store.state.client.sex,
      phone: store.state.client.phone,
      birthday: store.state.client.birthday,
      prefer: store.state.client.prefer,
    });
    store.dispatch("get_all_food_style", {
      form: {
        token: store.state.user.jwt_token,
      },
    });
    let food_style_list = computed(() => {
      return store.state.food_style.food_style_list;
    });
    let onSubmit = () => {
      let data = JSON.parse(JSON.stringify(form));
      if (form.birthday.length > 13) {
        data.birthday = dateUtil.formatDate(form.birthday).substring(0, 11);
      } else {
        data.birthday = form.birthday;
      }
      data.token = store.state.user.jwt_token;
      data.id = store.state.client.id;
      store.dispatch("modify_client_info", {
        data,
        success(data) {
          if (data.code == 200) {
            ElNotification.success({
              title: "Success",
              message: "修改信息成功",
            });
            store.dispatch("get_all_food_style", {
              form: {
                token: store.state.user.jwt_token,
              },
            });
          } else {
            ElNotification.error({
              title: "Error",
              message: "修改信息失败" + data.message,
            });
          }
        },
        error(data) {
          ElNotification.error({
            title: "Error",
            message: "修改信息失败" + data.message,
          });
        },
      });
    };
    // console.log(form);
    return {
      form,
      store,
      onSubmit,
      food_style_list,
    };
  },
};
</script>

<style scoped></style>
